	<template>
		<view class="page">
			<view class="chat-wrap">
				<view class="chat-content">
					<uni-list :border="false">
						<!-- 用户列表 :class="{'active':isShowPanal}"-->
						<view v-for="(item,index) in userList" :id="`list-${item.id}`" :key="index"  @touchstart="touchstart" @touchend="touchend">
							<uni-list-chat :clickable="true"
								@click="handleClick(item)"
								:title="item.name" :avatar="item.avatar" :note="item.msg" :time="item.time" badge-positon="left"
								:badge-text="item.unreadNum>99?'99':item.unreadNum" :ellipsis="1"></uni-list-chat>
						</view>
					</uni-list>
					<view class="mask" v-show="isShowPanal" @click="isShowPanal=false">
						
					</view>
					<view id="panal" :style="{left: left+'px',top: top+'px'}" v-show="isShowPanal">
						<view class="">
							标为未读
						</view>
						<view class="">
							置顶
						</view>
						<view class="">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					//是否长按事件
					islongPress: false,
					timer: null, //长按计时器
					isShowPanal: false,
					//pageUrl跳转到聊天室路径
					pageUrl: "/pagesA/chatRoom/chatRoom",
					//新增加的聊天人员列表，请求完数据后需清空，等待下次数据请求在赋值
					userList: [{
						id: 1,
						name: "张三",
						unreadNum: "103", // 未读数
						msg: "测试消息测试消息测试消息测试消息测试消息", // 信息
						msgType: "text", // 消息类型
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png", // 头像
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}, {
						id: 1,
						name: "张三",
						unreadNum: "103",
						msg: "测试消息测试消息测试消息测试消息测试消息",
						msgType: "text",
						time: "2023-9-20 20:38:35",
						avatar: "/static/logo.png",
						setTopPerson: "0", // 是否至顶
					}],
					
					screenWidth: 0,
					screenHeight: 0,
					left: 0,
					top: 0,
				}
			},
			onLoad() {
				this.getScreenSize()
			},
			methods: {
				getScreenSize() {
					uni.getSystemInfo({
						success: (res) => {
							this.screenWidth = res.windowWidth; // 屏幕宽度，单位为px
							this.screenHeight = res.windowHeight; // 屏幕高度，单位为px
							console.log('屏幕宽度：', this.screenWidth);
							console.log('屏幕高度：', this.screenHeight);
						},
					});
				},
				//长按事件
				longpress(ev) {
					this.islongPress = true;
					this.isShowPanal = true;
					// uni.showToast({
					// 	title:'长按事件',
					// 	icon:'none'
					// })
					// console.log(ev);
					let {clientX,clientY} =  ev.changedTouches[0];
					if(clientX<=this.screenWidth/2){
						this.left = clientX;
					}else{
						this.left = clientX - 80;
					}
					if(clientY<=this.screenHeight/2){
						this.top = clientY;
					}else{
						this.top = clientY - 120;
					}
					// let view = uni.createSelectorQuery().in(this).select(`#list-${item.id}`);
					// view.boundingClientRect((res) => {
					// 	console.log("res",res)
					// }).exec();
				},
				//点击事件
				handleClick(item) {
					// 非长按
					if (this.islongPress == false) {
						console.log("点击事件");
						this.goToPage('/pagesA/chatRoom/chatRoom?id=' + item.id);
					} else if (this.islongPress == true) {
						console.log("长按事件");
						
					}
				},
				//手指触摸动作开始
				touchstart(ev) {
					this.timer = setTimeout(() => {
						this.longpress(ev);
					}, 800)
				},
				//手指触摸动作结束
				touchend() {
					//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
					clearTimeout(this.timer);
					setTimeout(() => {
						this.islongPress = false
					}, 100)
				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.mask {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		#panal {
			position: fixed;
			left: 0;
			top: 0;
			background-color: #FFF;
			box-shadow: 0 0 2px #e8e4e4;
			padding: 20rpx 20rpx;
			view {
				padding: 10rpx 0;
			}
		}
		.chat-wrap {
			padding-top: 30rpx;
			width: 92%;
			margin: auto;

			.chat-content {
				padding: 20rpx 0rpx;
				background-color: #fff;
				min-height: 1000rpx;
				border-radius: 20rpx;

				/deep/ .uni-list-chat__container {
					// padding: 20rpx 0;
					border-bottom: 1px solid #f5f5f5;
				}

				/deep/ .uni-ellipsis {
					display: block;
				}
				.active {
					/deep/ .uni-list-chat {
						background-color: #f5f5f5;
					}
				}
				
			}
		}
	</style>